<template>

	<div id="login">

		<el-row>
			<!-- 图标位置调整 -->
			<el-col :span="8" :offset="7">
				<el-row>
					<el-col :span="2" :offset="13">
						<i class="el-icon-food"></i>
					</el-col>
				</el-row>
				<!-- 表单控件区域 -->
				<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
					class="demo-ruleForm">
					<el-form-item label="用户名" prop="username">
						<el-input v-model="ruleForm.username" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
					</el-form-item>

					<el-form-item>
						<el-row>
							<el-col :span="12" :offset="6">
								<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
								<el-button @click="resetForm('ruleForm')">重置</el-button>
							</el-col>
						</el-row>
					</el-form-item>
				</el-form>
				<!-- 版权所有&跳转登录 -->
				<el-row>
					<el-col :span="18" :offset="6">
						<p>
							吃了吗点餐系统属于格莱科技旗下产品 copyright : raoqi@qq.com 最终解释权归学校所有。

							点击<a @click="jumpReg">此处</a>去注册。
						</p>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			//验证方法
			var valiUsername = function(rule, value, callback) {
				if (value.trim().length == 0) {
					return callback(new Error('用户名不能为空'));
				}
				return callback();
			};
			var valiPassword = function(rule, value, callback) {
				if (value.trim().length == 0) {
					return callback(new Error('密码不能为空'));
				}
				return callback();
			};
			//变量
			return {
				ruleForm: {
					username: "",
					password: ""
				},
				// 关联验证事件
				rules: {
					username: {
						validator: valiUsername,
						trigger: 'blur'
					},
					password: {
						validator: valiPassword,
						trigger: 'blur'
					}
				}
			}
		},
		methods: {
			jumpReg() {
				this.$router.push("/reg");
				return false;
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			submitForm(formName) {
				//如果不填，减少对服务器的提交（此处验证可以提升效率）
				if (this.ruleForm.username.trim().length == 0 || this.ruleForm.password.trim().length == 0) {
					this.$message.error("用户名或密码不能为空");
					return;
				}

				//验证账户是否正确
				let p = {
					username: this.ruleForm.username,
					password: this.ruleForm.password
				};
				this.$http.post("/login", p).then(res => {
					console.log(res);
					if (res.data.errCode != 0) {
						this.$message.error("用户名或密码不正确");
					} else {
						this.$message.success("登录成功");
						//思考？
						/*
						登录除了跳转到指定路由，还需要做什么？
						如果什么都不做，那么客户绕开登录，可以直接打开管理页吗？
						如何解决以上问题？(路由守卫)
						*/
						//保存“tokenid”和登录“用户名”
						localStorage.setItem("tokenID", res.data.tokenid);
						localStorage.setItem("userName", this.ruleForm.username);
						console.log("this", this);
						//重定向
						this.$router.push('/pos');
					}

				}).catch(err => {
					this.$message.error("服务器异常，请联系管理员")
				});
			}
		}
	}
</script>

<style scoped>
	#login {
		padding-top: 200px;
	}

	.el-icon-food {
		font-size: 48px;
		color: orange;
	}

	p {
		font-size: 12px;
	}

	a {
		color: red;
	}
</style>
